<template>
  <custom-dialog
    ref="dialog"
    :title="modalTitle"
    :before-confirm="beforeConfirm"
    :on-confirm="onConfirm"
    width="540px"
  >
    <el-form ref="form" :model="info" :rules="rules" label-width="100px">
      <el-form-item label="名称" prop="name">
        <el-input clearable v-model.trim="info.name"></el-input>
      </el-form-item>

      <el-form-item label="编码" prop="energyType">
        <el-input clearable v-model.trim="info.energyType"></el-input>
      </el-form-item>
      <el-form-item label="基础单位" prop="unit">
        <el-input clearable v-model.trim="info.unit"></el-input>
      </el-form-item>
      <el-form-item label="转换系数" prop="ratio">
        <el-input-number v-model="info.ratio" :min="1" :max="10000000000" :step="1"
          step-strictly style="width: 180px;"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="序号" prop="num">
        <template #label>
          <el-tooltip content="数值越小，排序靠前" placement="top">
            <span>
              序号
              <i class="el-icon-warning-outline" />
            </span>
          </el-tooltip>
        </template>
        <el-input-number
          v-model="info.num"
          style="width: 180px;"
        ></el-input-number>
      </el-form-item>
    </el-form>
  </custom-dialog>
</template>

<script>
import CustomDialog from '@/components/custom-dialog';
import * as api from '@/api/energy';

export default {
  name: 'operate-modal',
  props: {
    modalTitle: String,
    index: Number,
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  components: {
    CustomDialog
  },
  data() {
    return {
      info: {
        num: 0,
        name: '',
        energyType: '',
        unit: '',
        ratio: 1,
      },
      rules: {
        num: [{ required: true, message: '请输入序号' }],
        name: [{ required: true, message: '请输入名称' }],
        unit: [{ required: true, message: '请输入单位' }],
        ratio: [{ required: true, message: '请输入转换系数' }],
        energyType: [{ required: true, message: '请选择编码' }]
      }
    };
  },
  computed: {},
  created() {},
  methods: {
    open() {
      const isAdd = Object.keys(this.data).length === 0;
      this.info = isAdd
        ? this.$options.data().info
        : {
            ...this.$options.data().info,
            ...this.data
          };
      if (isAdd) {
        this.info.num = this.index;
      }
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
      this.$nextTick(() => {
        this.$refs.dialog.open();
      });
    },
    beforeConfirm() {
      return this.$refs.form.validate();
    },
    async onConfirm(close) {
      console.log('关闭');
      const params = { ...this.info };
      await this.saveOrUpdate(params);
      this.$emit('save-success');
      this.$message.success('保存成功');
      close();
    },
    async saveOrUpdate(params) {
      await api.saveOrUpdateType(params);
    }
  }
};
</script>

<style scoped></style>
